<template>
    <div class="global-help-list-page">
        <el-card shadow="never">
            <el-button type="primary" @click="onAddClick">新增</el-button>
            <div class="mt-4" v-loading="loading">
                <el-table :data="data">
                    <el-table-column align="center" label="分类" prop="category_name"/>
                    <el-table-column align="center" label="标题" prop="name"/>
                    <el-table-column align="center" label="是否是常见问题">
                        <template slot-scope="{row}">
                            {{ row.is_common ? '是' : '否' }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="创建时间">
                        <template slot-scope="{row}">
                            {{ row.created_at | formatTime }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作">
                        <template slot-scope="{row}">
                            <el-button type="text" @click="onViewClick(row)">预览</el-button>
                            <el-button type="text" @click="onAddClick(row)">编辑</el-button>
                            <el-button type="text" @click="onDeleteClick(row)" class="red-color">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-if="totalElements > 0" class="footer flex justify-end items-center">
                <el-pagination
                    @current-change="fetchData"
                    @size-change="fetchData"
                    class="center"
                    :current-page.sync="form.page"
                    :page-size.sync="form.size"
                    :page-sizes="[10, 25, 50]"
                    layout="sizes, total, prev, pager, next, jumper"
                    :total="totalElements">
                </el-pagination>
            </div>
        </el-card>

        <el-drawer
            title="预览"
            :visible.sync="drawer"
            size="50%"
            direction="rtl">
            <div class="px-2 py-2" v-html="content"></div>
        </el-drawer>
    </div>
</template>

<script>
import { Drawer } from 'element-ui';

export default {
    components: {
        ElDrawer: Drawer,
    },
    mixins: [require('@/mixins/CacheQuery').default],
    data() {
        return {
            activeName: 'first',
            loading: false,
            drawer: false,
            data: [],
            form: {
                page: 1,
                size: 10,
                categoryId: '',
            },
            totalElements: 0,
            content: '',

            helpContent: '',
        };
    },
    watch: {
        drawer(val) {
            if (!val) this.content = '';
        },
    },
    methods: {
        fetchData() {
            this.loading = true;
            API.get('problem', {params: this.form}).then((res) => {
                this.data = res.content;
                this.totalElements = res.pagination.total;
            }).finally(() => {
                this.loading = false;
            });
        },
        onAddClick(e) {
            const obj = {
                name: 'Help.Admin.Form',
                params: {
                    id: e.id,
                },
            };
            if (!e.id) delete obj.params;
            this.$router.push(obj);
        },
        onViewClick(e) {
            this.content = e.content;
            this.drawer = true;
        },
        onDeleteClick(row) {
            $ele.$confirm('是否删除此问题？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.loading = true;
                API.delete(`problem/${row.id}`, {
                }).then(() => {
                    $ele.$message.success('删除成功');
                    this.fetchData();
                }).finally(() => {
                    this.loading = false;
                });
            }).catch(() => { });
        },
    },
    mounted() {
        this.fetchData();
    },
};
</script>

<style lang="scss">
.global-help-list-page {
    .filter {
        .input-width {
            max-width: 300px;
        }
    }
    .footer {
        height: 44px;
        background: #f7f7f7;
        padding-left: 20px;
        padding-right: 20px;
    }

    .el-drawer__header > :first-child,
    .el-drawer__open .el-drawer.rtl {
        outline: none;
    }
}
</style>
